<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,width=device-width"/>
<link rel="stylesheet" type="text/css" href="../bootstrap4/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<title>结算</title>
</head>
<body>
<div class="banner hidden-sm-down">
	<img class="banner_img" src="../img/bg.jpg" />
	<img class="logo" src="../img/logo.png" />
</div>
<header class="my-header">
	<nav class="navbar navbar-light bg-faded">
		<div class="container">
			<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
			<a href="/" class="form-inline float-xs-right center">
	        	<img src="../img/Personal-Center.png" />
				<span>个人中心</span>
		    </a>
		    <div class="collapse navbar-toggleable-xs" id="navbar-header">
		      <ul class="nav navbar-nav">
		      	<li class="nav-item">
		          <a class="nav-link" href="#">Navbar</a>
		      	</li>
		        <li class="nav-item dropdown">
				    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
				    <div class="dropdown-menu">
				      <a class="dropdown-item" href="#">Action</a>
				      <a class="dropdown-item" href="#">Another action</a>
				      <a class="dropdown-item" href="#">Something else here</a>
				      <div class="dropdown-divider"></div>
				      <a class="dropdown-item" href="#">Separated link</a>
				    </div>
				</li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">Features</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">Pricing</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="#">About</a>
		        </li>
		      </ul>
		    </div>
		</div>
	</nav>
</header>	
<section class="container pd20 mall_box Settlement">
	<div>
		<h4>收货信息</h4>
		<ul class="Balance mt20 float-xs-right mr-3">
			<li>奖金余额:<span>￥500</span></li>
			<li><span style="letter-spacing: 5px;color: #55595c;">pv余额</span>:<span>￥40</span></li>
			<li>购物余额:<span>￥74</span></li>
		</ul>
		<ul class="shdz mt20">
			<li>姓名:<span>张三</span></li>
			<li>邮编:<span>400000</span></li>
			<li>电话:<span>13637917354</span></li>
			<li>地址:<span>渝北金渝大道68号</span></li>
		</ul>
		<p class="mt20">
		  <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#address" aria-expanded="false">
		    添加收货信息
		  </button>
		</p>
		<div class="collapse" id="address">
		  <div class="card card-block">
		    <div class="form-group row">
			  <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
			  <div class="col-xs-10">
			    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
			  </div>
			</div>
			<div class="form-group row">
			  <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
			  <div class="col-xs-10">
			    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
			  </div>
			</div>
			<div class="form-group row">
			  <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
			  <div class="col-xs-10">
			    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
			  </div>
			</div>
			<div class="form-group row">
			  <label for="example-text-input" class="col-xs-2 col-form-label"></label>
			  <div class="col-xs-10">
			    <button class="btn btn-success" onclick="edit_address()">提交</button>
			  </div>
			</div>
		 </div>	
		</div>
	</div>
	<h4 class="mt20">订单列表</h4>
	<div class="table_ovf">
		<table class="table mt20">
		  	<thead class="thead-default">
			    <tr>
				    <th>#</th>
				    <th>First Name</th>
				    <th>Last Name</th>
				    <th>Username</th>
				    <th>Username</th>
				    <th>Username</th>
			    </tr>
			</thead>
			<tbody>
			    <tr>
			      	<th scope="row">1</th>
			      	<td>Mark</td>
			      	<td>Otto</td>
			      	<td>@mdo</td>
			      	<td>@mdo</td>
			      	<td>
			      		<a class="btn btn-secondary h_min"><i class="iconfont icon-huishouzhan"></i></a>			      		
			      	</td>
			    </tr>
			    <tr>
			      	<th scope="row">2</th>
			      	<td>Jacob</td>
			      	<td>Thornton</td>
			      	<td>@fat</td>
			      	<td>@mdo</td>
			      	<td>
			      		<a class="btn btn-secondary h_min"><i class="iconfont icon-huishouzhan"></i></a>	
			      	</td>
			    </tr>
			    <tr>
			      	<th scope="row">3</th>
			      	<td>Larry</td>
			      	<td>the Bird</td>
			      	<td>@twitter</td>
			      	<td>@mdo</td>
			      	<td>
			      		<a class="btn btn-secondary h_min"><i class="iconfont icon-huishouzhan"></i></a>	
			      	</td>
			    </tr>
			</tbody>
		</table>
	</div>
	<div class="flex">
		<p class="sum">奖金积分总额：<span>￥2000</span></p>
		<p class="sum ml20">购物积分总额：<span>￥2000</span></p>
		<p class="sum ml20">产生pv总额：<span>￥2000</span></p>
	</div>
	<div class="bd-example">
	  <button type="button" class="btn btn-danger float-xs-right mt_btm20" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">确认支付</button>
	  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	    <div class="modal-dialog" role="document">
	      <div class="modal-content">
	        <div class="modal-header">
	          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	            <span aria-hidden="true">&times;</span>
	          </button>
	          <h4 id="exampleModalLabel">请输入密码</h4>
	        </div>
	        <div class="modal-body">
	          <form>
	            <div class="form-group">
				    <label for="exampleInputPassword1">密码</label>
				    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="">
				</div>
	          </form>
	        </div>
	        <div class="modal-footer">
	          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	          <button type="button" class="btn btn-success">确认</button>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
</section>
</body>
<script src="../jquery-3.0.0/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap4/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(document).ready(function(e) {
	    $("#btn").click(function(e) {
	    $("#spc").toggle();
	    });
	});
	
	$('#exampleModal').on('show.bs.modal', function (event) {
	  var button = $(event.relatedTarget) // Button that triggered the modal
	  var recipient = button.data('whatever') // Extract info from data-* attributes
	  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
	  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
	})
	
</script>
</html>